<template>
	<!-- 登录 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="f0 p-3" style="opacity: 0;">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view @click="$tool.navTo('/pages/login/register')" class="flex align-center A-Medium mr-3">
					<text class="codeDesc" style="margin-top: 0;">{{i18n10.n001}}</text> <text
						class="codeText2">{{i18n.l001}}</text>
				</view>
			</view>
			<!-- <view class="flex justify-end pr-5 pt-3">
				<view @click="$tool.navTo('/pages/login/register')" class="changeBtn clickCss A-Medium"
					:class="model=='light'?'changeBtnLight':''">
					{{i18n.l001}}
				</view>
			</view> -->
			<view class="title1 pl-5 A-Bold">
				{{i18n.l003}}
			</view>
			<view class="title2 pl-5 A-Bold" :class="model=='light'?'title2Light':''">
				{{i18n.l004}}
			</view>
			<view class="tabList px-5 flex align-center">
				<view @click="changeTabId(1)"
					:class="['tabItem A-Bold mr-6',tabId==1?model=='light'?'tabItem2Light':'tabItem2':'']">
					{{i18n.l006}}
					<view v-if="tabId==1" class="bar">
						
					</view>
				</view>
				<view @click="changeTabId(2)"
					:class="['tabItem A-Bold mr-6',tabId==2?model=='light'?'tabItem2Light':'tabItem2':'']">
					{{i18n.l007}}
					<view v-if="tabId==2" class="bar">

					</view>
				</view>
				<!-- <view v-if="isSetFace" @click="changeTabId(3)"
					:class="['tabItem A-Bold mr-6',tabId==3?model=='light'?'tabItem2Light':'tabItem2':'']">
					{{i18n.l008}}
					<view v-if="tabId==3" class="bar">

					</view>
				</view> -->
			</view>
		</view>
		<view class="formWrap px-5 A-Regular mt-8">
			<!-- 账号 -->
			<view class="formTitle">
				{{tabId==1?i18n.l009:i18n.l007}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<view v-if="tabId==1" class="flex align-center">
					<view class="area" :class="model=='light'?'areaLight':''">
						+86
					</view>
					<view class="f0">
						<image class="img1" :src="'/static/images/downArrow_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<input type="text" v-model="account" :placeholder="tabId==1?i18n.l011:i18n.l012"
					class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
			</view>
			<!-- 密码 -->
			<template v-if="loginType==1">
				<view class="formTitle">
					{{i18n.l016}}
				</view>
				<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
					<input :type="showPass?'text':'password'" v-model="password" :placeholder="i18n.l017"
						class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
						:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
					<view @click="showPass=!showPass" class="f0 pl-3">
						<image v-if="showPass" class="img2" :src="'/static/images/hiddenPass_'+model+'.png'" mode="">
						</image>
						<image v-else class="img2" :src="'/static/images/showPass_'+model+'.png'" mode=""></image>
					</view>
				</view>
			</template>
			<!-- 验证码 -->
			<template v-else>
				<view class="formTitle">
					{{i18n.l013}}
				</view>
				<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
					<input type="text" v-model="code" :placeholder="i18n.l014" class="flex-1 inputText A-Medium"
						:class="model=='light'?'inputTextLight':''"
						:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
					<view v-if="codeText == 60" @click="sendCode" class="codeText A-Medium pl-3">
						{{i18n.l015}}
					</view>
					<view v-else class="codeText A-Medium pl-3">{{codeText + 's'}}</view>
				</view>
			</template>
			<!-- 忘记密码 -->
			<view class="flex forgetPass justify-between">
				<view @click="$tool.navTo('/pages/login/forgotPass')" class="clickCss">
					{{i18n.l018}}
				</view>
				<view @click="changeLoginType" class="clickCss">
					{{loginType==1?i18n.l019:i18n.l020}}
				</view>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view @click="submit" class="btn mx-auto A-Medium mt-8 clickCss">
			{{i18n.l002}}
		</view>
		<view class="codeDesc text-alignC A-Medium mx-6">
			{{ tabId==1 ? i18n10.n158 : i18n10.n002}}
		</view>
	</view>
</template>

<script>
	import {
		getMobileVerifyCode,
		getEmailVerifyCode,
		mobileNumberLogin,
		emailLogin,
		mobileVerifyCodeLogin,
		emailVerifyCodeLogin,
		saveOrUpdateLanguage,
		saveOrUpdateTheme,
		getUserStatus
	} from "@/core/api/user.js";
	export default {
		data() {
			return {
				tabId: 2, //1手机 2邮箱 3面容
				loginType: 1, //1密码登录 2验证码登录
				showPass: false, //是否显示密码
				account: '13752339479', //账号
				account: '', //账号
				password: 'bai211350', //密码
				password: '', //密码
				code: '', //验证码
				codeText: 60, //
				codeTimer: null,
				sendFlag: false
			}
		},
		onLoad() {

		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			i18n() {
				return this.$t('login');
			},
			i18n2() {
				return this.$t('showToast');
			},
			i18n10() {
				return this.$t('newObj');
			},
			model() {
				return this.$store.state.config.model;
			},
			isSetFace() {
				return uni.getStorageSync('isSetFace');
			}

		},
		methods: {
			// 切换登录方式
			changeTabId(id) {
				if (this.tabId == id) return;
				if (id == 3) {
					// 面容登录
					this.$tool.navTo('/pages/login/faceLogin?type=2')
					return;
				}
				this.tabId = id;
				this.resetForm(1);
			},
			// 发送验证码
			async sendCode() {
				if(this.sendFlag){
					return;
				}
				if (this.account === '') {
					if (this.tabId == 1) {
						this.$tool.showToast(this.i18n2.st001);
					} else if (this.tabId == 2) {
						this.$tool.showToast(this.i18n2.st002);
					}
					return;
				}
				this.$tool.showLoading();
				this.sendFlag = true;
				this.sendCodeAfter();
				if (this.tabId == 1) {
					await getMobileVerifyCode({
						phoneNumber: this.account,
					}).then(res => {
						
					})
				} else if (this.tabId == 2) {
					await getEmailVerifyCode({
						email: this.account,
					}).then(res => {
						
					})
				}
			},
			// 发送验证吗数据处理
			sendCodeAfter() {
				if(!this.codeTimer){
					this.codeTimer = setInterval(e => {
						if (this.codeText == 0) {
							this.codeText = 60;
							clearInterval(this.codeTimer);
							this.codeTimer = null;
							this.sendFlag = false;
							return;
						}
						this.codeText--;
						uni.hideLoading();
					}, 1000)
				}
			},
			// 切换密码登录、验证码登录
			changeLoginType() {
				this.loginType = this.loginType == 1 ? 2 : 1;
				this.resetForm();
			},
			// 登录
			submit() {

				if (this.account === '') {
					if (this.tabId == 1) {
						this.$tool.showToast(this.i18n2.st001);
					} else if (this.tabId == 2) {
						this.$tool.showToast(this.i18n2.st002);
					}
					return;
				}
				if (this.tabId == 1) {
					let data = {
						mobileNumber: this.account
					}
					if (this.loginType == 1) {
						if (this.password === '') {
							this.$tool.showToast(this.i18n2.st004);
							return;
						}
						data.password = this.password;
						this.$tool.showLoading();
						mobileNumberLogin(data).then(res => {
							this.submitAfter(res);
						}).catch(err => {
							uni.hideLoading();
						})
					} else if (this.loginType == 2) {
						if (this.code === '') {
							this.$tool.showToast(this.i18n2.st003);
							return;
						}
						data.verifyCode = this.code;
						this.$tool.showLoading();
						mobileVerifyCodeLogin(data).then(res => {
							this.submitAfter(res);
						}).catch(err => {
							uni.hideLoading();
						})
					}
				} else if (this.tabId == 2) {
					let data = {
						email: this.account
					}
					if (this.loginType == 1) {
						if (this.password === '') {
							this.$tool.showToast(this.i18n2.st004);
							return;
						}
						data.password = this.password;
						this.$tool.showLoading();
						getUserStatus(this.account).then(ress => {
							console.log(ress)
							if (ress.cancelStatus == 0&&ress.loginStatus == 0) {
								emailLogin(data).then(res => {
									this.submitAfter(res);
								}).catch(err => {
									uni.hideLoading();
								})
							} else {
								uni.hideLoading();
								if(ress.cancelStatus == 1){
									this.$tool.showToast('当前账号已注销');
								}else{
									this.$tool.showToast('当前账号已冻结');
								}
							}
						}).catch(err => {
							uni.hideLoading();
						})

					} else if (this.loginType == 2) {
						if (this.code === '') {
							this.$tool.showToast(this.i18n2.st003);
							return;
						}
						data.verifyCode = this.code;
						this.$tool.showLoading();
						getUserStatus(this.account).then(ress => {
							console.log(ress)
							if (ress.cancelStatus == 0&&ress.loginStatus == 0) {
								emailVerifyCodeLogin(data).then(res => {
									this.submitAfter(res);
								}).catch(err => {
									uni.hideLoading();
								})
							} else {
								uni.hideLoading();
								if(ress.cancelStatus == 1){
									this.$tool.showToast('当前账号已注销');
								}else{
									this.$tool.showToast('当前账号已冻结');
								}
							}
						}).catch(err => {
							uni.hideLoading();
						})
						
					}
				}
			},
			// 登录后数据处理
			async submitAfter(res) {
				uni.setStorageSync('token', res.result.token);
				uni.setStorageSync('mobileUserId', res.result.mobileUserId);
				// uni.setStorageSync('inviteCode', res.result.inviteCode);
				uni.setStorageSync('email', res.result.email);
				uni.setStorageSync('mobileNumber', res.result.mobileNumber);
				await saveOrUpdateLanguage({
					mobileUserId: uni.getStorageSync('mobileUserId'),
					language: this._i18n.locale
				})
				await saveOrUpdateTheme({
					mobileUserId: uni.getStorageSync('mobileUserId'),
					theme: this.model
				})
				uni.hideLoading();
				this.$tool.showToast(this.i18n2.st008);
				setTimeout(res => {
					this.$tool.navTo('/pages/index/index', 4);
				}, 800)
			},
			resetForm(e) {
				if (e == 1) {
					this.loginType = 1;
				}
				this.showPass = false;
				this.account = '';
				this.password = '';
				this.code = '';
			}
		}
	}
</script>

<style scoped lang="scss">
	.codeText2 {
		font-size: 28rpx;
		color: #5951BA;
	}

	.codeDesc {
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #7F838D;
	}

	.changeBtn {
		padding: 12rpx 43rpx;
		background: #1F2128;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.changeBtnLight {
		background: #FFFFFF;
		color: #47474A;
	}

	.title1 {
		padding-top: 44rpx;
		font-size: 40rpx;
		color: #5951BA;
	}

	.title2 {
		padding-top: 6rpx;
		font-size: 40rpx;
		color: #F7F7F7;
	}

	.title2Light {
		color: #0E0F11;
	}

	.tabList {
		margin-top: 72rpx;
		margin-bottom: 72rpx;
		font-size: 32rpx;

		.tabItem {
			color: #7F838D;
			position: relative;

			.bar {
				width: 70rpx;
				height: 6rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				background: linear-gradient(90deg, #5951BA 35%, rgba(89, 81, 186, 0) 100%);
			}
		}

		.tabItem2 {
			color: #F7F7F7;
		}

		.tabItem2Light {
			color: #0E0F11;
		}
	}

	.formWrap {
		.formTitle {
			font-size: 28rpx;
			color: #7F838D;
			margin-bottom: 22rpx;
		}

		.inputWrap {
			width: 650rpx;
			height: 88rpx;
			background: #16181C;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-bottom: 35rpx;

			.area {
				font-size: 28rpx;
				color: #AAACB8;
			}

			.areaLight {
				color: #7F838D;
			}

			.inputText {
				font-size: 28rpx;
				color: #F7F7F7;
				// text-align: right;
			}

			.inputTextLight {
				color: #0E0F11;
			}

			.placeholderClass {
				font-size: 28rpx;
				color: #7F838D;
			}

			.placeholderClassLight {
				color: #B5B7BF;
			}

			.img1 {
				width: 15rpx;
				height: 11rpx;
				margin-left: 16rpx;
				margin-right: 42rpx;
			}

			.img2 {
				width: 40rpx;
				height: 40rpx;
			}

			.codeText {
				font-size: 28rpx;
				color: #5951BA;
			}
		}

		.inputWrapLight {
			background: #FFFFFF;
		}

		.forgetPass {
			font-size: 28rpx;
			color: #5951BA;
		}
	}

	.btn {
		width: 650rpx;
		height: 80rpx;
		background: #5951BA;
		border-radius: 74rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}
</style>